<template>
  <div>
    <el-drawer
            title="任务执行情况"
            :visible.sync="dialogVisible"
            size="40%"
            :wrapperClosable="wrapperClosable"
            :close-on-press-escape="closscape"
            :destroy-on-close="true"
            @close="$emit('update:visible',false)"
    :before-close="checkfood">
      <div class="table-body-list new-table-body-list">
        <!--v-model="activeNames"-->
        <el-collapse @change="handleChange" accordion>
          <el-collapse-item :name="index" v-for="(item,index) in taskList"
                            :disabled="item.is_end=='未处理'||item.is_end=='已转派'?'':false" class="list-tree-line">
            <template slot="title">
              <p class="title-user-line">任务用户：<span class="lefttitle">{{item.user_id}}</span> <em
                      :class="item.is_end=='完成'||item.is_end=='已转派'?'c-success':'c-danger'">（{{item.is_end=='已转派'?item.reply:item.is_end}}）</em><span
                      class="righttitle">{{item.is_end!=='已转派'&&item.is_end!=='未处理'?'任务日志':'无日志'}}</span></p>
            </template>
            <div
                    v-loading="taskUserList[index].status"
                    element-loading-text="拼命加载中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.7)"
                    element-loading-color="#fff"
                    class="tableList-body">
              <div class="tableList-body-title">
                <div class="titleList">报告时间</div>
                <div class="titleList">任务报告</div>
                <div class="titleList">任务状态</div>
              </div>
              <div v-if="taskUserList[index].list.length!==0">
                <div v-for="(items,indexs) in taskUserList[index].list" class="tableList-body-line">
                  <div class="tableList-body-box">
                    {{items.update_time}}
                  </div>
                  <div class="tableList-body-box">
                    <div v-if="items.reply">
                      <div v-if="items.is_end=='未处理'">
                        <span class="c-danger">暂无处理信息</span>
                      </div>
                      <div v-else>
                        <div class="replyBodyBox">
                          <div>{{items.reply}}</div>
                          <div v-if="items.reply_pic" class="checkImg" @click="privaStatusFn(1,items.reply_pic)">
                            查看执行图
                          </div>
                          <div v-if="items.file" class="checkImg" @click="priveWord(items.file)">
                            查看附件文档
                          </div>
                          <!--<div class="timereply">处理时间：{{items.update_time}}</div>-->
                        </div>
                        <!--adminUserId 发布人 user_id 当前用户 doer_id 列表用户id-->
                        <div>
                          <!--// 只有发布人才可以进行回复评论-->
                          <el-button v-if="!items.evaluate&&taskAdminId==user_id" type="success" size="small"
                                     @click="openCommonDialog(items,index)">评论
                          </el-button>
                          <div v-if="items.evaluate" class="evaluateBox">
                            <span>评论：</span>
                            <div class="evaluateBox_right">
                              <div>{{items.evaluate}}</div>
                              <p class="checkImg" @click="privaStatusFn(2, items.evaluate_pic)"
                                 v-if="items.evaluate_pic">
                                查看评论图</p>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div v-else>
                      <div v-if="items.is_end!=='执行中'">
                        <span class="c-danger">未接受任务</span>
                      </div>
                      <div v-else>
                        <span class="c-success">执行中</span>
                      </div>
                    </div>
                  </div>
                  <div class="tableList-body-box">
                    <span class="c-success" v-if="items.is_end==1">完成任务</span>
                    <span class="c-danger" v-else>未完任务报告</span>
                  </div>
                </div>
              </div>
              <div v-else class="taskNoneData">
                暂无日志数据
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
        <div class="task-footer">
          <el-button type="primary" @click.native="checkfood()" size="small">返回</el-button>
        </div>
      </div>
    </el-drawer>
    <!--    图片弹窗 -->
    <previewImgDialog :privaImgObj="privaImgObj" :visible.sync="dialogImgVisible"
                      :privaStatus="privaStatus"></previewImgDialog>
    <!--detail 任务详情信息 getUser 执行函数 commonType回复类型，1去执行 2管理员评论-->
    <teskCommon :visible.sync="commonvisible" v-if="commonvisible" @getUser="getUser" :detail="editForm"
                :commonType="commonType" :taskUserId="taskUserId"></teskCommon>
    <div class="iframeBoxBody" v-if="iframeState">
      <img src="@/assets/imageAdmin/closeimg.png" alt="" @click.stop="iframeState=false">
      <webview id="foo" :src="iframeSrc" style="display:inline-flex; width:840px; height:680px;background:#fff;"
               plugins v-if="iframeState"></webview>
      <!--<iframe id="foo" frameborder=0 name="showHere" scrolling=auto :src="url" class="iframeBoxLine" v-if="iframeState"></iframe>-->
    </div>
  </div>
</template>
<script>
  import api from '@/utils/api.js'
  import {pagination} from '@/utils/util.js'
  import previewImgDialog from '@/components/dialog/previewImgDialog.vue'
  import teskCommon from '@/components/dialog/taskCommonDialog.vue'

  export default {
    name: 'Dialog',
    props: ['visible', 'taskId'],
    watch: {
      visible () {
        this.dialogVisible = this.visible
      }
    },
    components: {
      previewImgDialog,
      teskCommon
    },
    data () {
      return {
        valueline: '',
        taskAdminId: 0, // 当前任务的发布人
        user_id: 0, // 当前账号用户
        // activeNames: [0], //  默认张开
        wrapperClosable: false,
        closscape: false,
        dialogVisible: this.visible,
        taskList: [],
        page: {
          pageindex: pagination.pageIndex,
          pagesize: pagination.pageSize,
          total: pagination.total
        },
        SelectionVal: this.SelectionValNew,
        privaImgObj: null,
        dialogImgVisible: false,
        privaStatus: null, // 1 执行回复 2 评论回复
        taskUserList: [],
        taskUserGet: null, // 当前用户id
        taskUserIndex: 0, // 当前日志序列号
        clickStatus: 0,
        commonvisible: false, // 评论
        editForm: null, // 评论详情
        commonType: 2, // commonType 回复类型，1 去执行 2 管理员评论
        iframeState: false,
        iframeSrc: '',
        httpUrlInfo: ''
      }
    },
    created () {
      console.log('taskUserList:', this.taskUserList)
      console.log('taskUserList:', this.taskList)
      this.db.findOne({
        name: 'userInfomation'
      }, (err, ret) => {
        console.log('获取用户信息内容', ret.value)
        this.user_id = ret.value.id
      })
      this.InitFn()
      this.httpFnLine()
    },
    methods: {
      handleChange (val) {
        if (val !== undefined) {
          this.taskUserGet = this.taskList[val].id
          this.taskUserIndex = val
          if (this.taskUserList[val].status) {
            this.downboxFn()
          }
        }
      },
      InitFn () {
        this.$fetch(api.task_replylist_id + this.taskId, {p: this.page.pageindex}).then((response) => {
          if (response.result === 1) {
            this.taskAdminId = response.admin_id
            for (let i in response.list) {
              this.taskUserList.push({list: [], status: true})
            }
            this.taskList = response.list
          } else {
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      downboxFn () {
        // reportList  传 task_user_id
        // taskUserGet: null, // 当前用户id  taskUserIndex: 0 // 当前日志序列号 {list: [], status: true}
        this.$post(api.task_reportList, {task_user_id: this.taskUserGet}).then((response) => {
          if (response.code === 0) {
            let option_ = this.taskUserList[this.taskUserIndex]
            option_.list = response.list
            option_.status = false
            this.$set(this.taskUserList, this.taskUserIndex, option_)
          } else {
            this.$message.error(response.msg)
          }
        }).catch((err) => {
          console.log(err)
        })
      },
      // 选项
      handleSelectionChange (val) {
        this.SelectionVal = val
      },
      checkfood () {
        this.dialogVisible = false
        this.taskList = []
        this.taskUserList = []
      },
      privaStatusFn (option, privaImg) {
        let privaImgList = privaImg
        if (privaImg) {
          privaImgList = privaImg.split(',')
        }
        this.privaImgObj = privaImgList
        this.privaStatus = option
        this.dialogImgVisible = true
      },
      // 任务详情数据获取
      taskDetail (id, type, name) {
        this.clickStatus = type
        this.editBox = id
        this.taskDetailvisible = true
      },
      openCommonDialog (option, index) {
        option.taskName = this.taskList[index].user_id
        this.taskUserId = this.taskList[index].id
        this.editForm = option
        this.commonvisible = true
      },
      getUser () {
        console.log('刷新页面')
        this.InitFn()
        this.downboxFn()
      },
      // 获取默认域名
      httpFnLine () {
        this.$fetch(this.api.system_setting, {}).then(res => {
          if (res.code === 0) {
            this.httpUrlInfo = res.vo.url
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      },
      priveWord (option) {
        if (this.httpUrlInfo) {
          this.iframeSrc = 'https://view.officeapps.live.com/op/view.aspx?src=' + this.httpUrlInfo + option
          this.iframeState = true
        } else {
          this.$message.error('学校还未设置域名，请联系管理员！')
        }
      }
    }
  }
</script>
